import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)


//懒加载方式一：
// const index = ()=>  import("../pages/index.vue");
const login = () => import("../pages/login.vue");
const search = () => import("../pages/search.vue");
const list = () => import("../pages/list.vue");
const detail = () => import("../pages/detail.vue");
const order = () => import("../pages/order.vue");

// const home = ()=>  import("../views/home.vue")
const sort = () => import("../views/sort.vue")
const shop = () => import("../views/shop.vue")
const mine = () => import("../views/mine.vue")


const router = new VueRouter({
  //路由模式
  //mode: 'hash', //默认的，访问路径上#
  // mode:'history', //
  routes: [
    {
      path: "/index",
      // 懒加载方式二
      component: () => import("../pages/index.vue"),
    
      children: [
        {
          path: "home",
          component: () => import("../views/home.vue"),
          meta:{
            //自定义数据，在这里面定义很多的数据，然后数据可以$route.meta对象中取值
            title:"首页"
          },
        },
        {
          path: "sort",
          component: sort,
          //命名路由
          name:"分类列表",
          meta:{
            //自定义数据，在这里面定义很多的数据，然后数据可以$route.meta对象中取值
            title:"分类"
          },
        },
        {
          path: "shop",
          component: shop,
          meta:{
            //自定义数据，在这里面定义很多的数据，然后数据可以$route.meta对象中取值
            title:"购物车"
          },
          //2.----------独享路由守卫-------------
          beforeEnter(to,from,next){
              console.log("独享路由守卫--去哪",to.path)
              console.log("独享路由守卫--来自",from.path);
              //如果你用户就能访问购物车，如果你是商家，就不能访问购物车
              if(localStorage.getItem("ju") == "1"){
                next()
              }else{
                next("/index/home")
              }
          }
        },
        {
          path: "mine",
          component: mine,
          meta:{
            //自定义数据，在这里面定义很多的数据，然后数据可以$route.meta对象中取值
            title:"我的"
          },
        },
        {
          path: "",
          redirect: "home"
        }

      ]
    },
    {
      path: "/login",
      components: {
        //  //命名视图
        default:()=>import("../pages/login.vue"),
        view1:()=>import("../pages/test.vue"),
      },
      //起别名，通过/login访问这个路由，也可以通过别名/aaaa访问路由
      alias:"/aaaa",
    

    },
    {
      path: "/search",
      component: search
    },
    {
      path: "/list",
      component: list
    },
    // 动态路由传参
    {
      path: "/detail/:id",
      component: detail
    },
    {
      path: "/order",
      component: order
    },
    {
      path: "*",
      redirect: "/index"
    }
  ]
})

//------全局路由守卫------------
//全局路由守卫 -- 前置
router.beforeEach((to,from,next)=>{
   //to:去的路由
   //from:来的路由
   //next() / next("/路径") : 往下执行
   console.log("全局路由守卫-前置-去那",to.path);
   console.log("全局路由守卫-前置-来自",from.path);
   
   //需求：如果登录就去看首页，如果没有登录就登录
   if(localStorage.getItem("isLogin") =="true"){
      next();
   }else{

    //如果要去的登录页面，往下走
    if(to.path == "/login"){
      next();
    }else{
       next("/login")
    }
    
   }
})


//全局路由守卫 -- 后置
router.afterEach((to,from,next)=>{
  //to:去的路由
  //from:来的路由
  console.log("全局路由守卫-后置-去那",to.path);
  console.log("全局路由守卫-后置-来自",from.path);
})
export default router
